<template>
  <nav class="page-menu">
    <h3>页面导航</h3>
    
    <div v-for="group in groupedConfigs" :key="group.name" class="menu-group">
      <h4>{{ group.name }}</h4>
      <ul>
        <li v-for="config in group.configs" :key="config.path">
          <router-link 
            :to="config.path" 
            class="menu-item"
            :class="{ active: $route.path === config.path }"
          >
            <span v-if="config.icon" class="icon">{{ config.icon }}</span>
            <span class="title">{{ config.title }}</span>
            <span v-if="config.tags" class="tags">
              <span v-for="tag in config.tags.slice(0, 2)" :key="tag" class="tag">
                {{ tag }}
              </span>
            </span>
          </router-link>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { usePageConfig } from '@/composables/usePageConfig'

const { menuConfigs } = usePageConfig()

// 按分组整理配置
const groupedConfigs = computed(() => {
  const groups = new Map<string, any[]>()
  
  menuConfigs.value.forEach(config => {
    const groupName = config.group || '其他'
    if (!groups.has(groupName)) {
      groups.set(groupName, [])
    }
    groups.get(groupName)!.push(config)
  })
  
  return Array.from(groups.entries()).map(([name, configs]) => ({
    name,
    configs: configs.sort((a, b) => (a.order || 999) - (b.order || 999))
  }))
})
</script>

<style scoped>
.page-menu {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.menu-group {
  margin-bottom: 20px;
}

.menu-group h4 {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
  font-weight: 600;
}

.menu-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  margin-bottom: 4px;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #e9ecef;
}

.menu-item.active {
  background-color: #007bff;
  color: white;
}

.icon {
  margin-right: 8px;
  font-size: 16px;
}

.title {
  flex: 1;
}

.tags {
  display: flex;
  gap: 4px;
}

.tag {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
}

.menu-item.active .tag {
  background: rgba(255, 255, 255, 0.2);
}
</style>